0000<template>
	<div class="home">
		<router-view></router-view>
		<div class="div-bottom">
			<div class="bottom_tubiao" @click="change(index)"  v-for="(item,index) in tubiaolist">
				<router-link :to="item.to">
					<img :src="index==selected?item.activeUrl:item.url" />
				<p :class="{color_active:index==selected}">{{item.text}}</p>
				</router-link>
				
				
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				tubiaolist:[
					{
						url:require("../assets/home/tab_home.png"),
						activeUrl:require("../assets/home/tab_home_active.png"),
						text:"首页",
						to:"/home"
					},{
						url:require("../assets/home/tab_shopcart.png"),
						activeUrl:require("../assets/home/tab_shopcart_active.png"),
						text:"购物车",
						to:"/home/shopping"
					},{
						url:require("../assets/home/tab_orders.png"),
						activeUrl:require("../assets/home/tab_orders_active.png"),
						text:"订单",
						to:"/home/orders"
					},{
						url:require("../assets/home/tab_mine.png"),
						activeUrl:require("../assets/home/tab_mine_active.png"),
						text:"我的",
						to:"/home/mine"
					}
				],
				selected:0
			}
		},
		methods:{
			change:function(index){
				this.selected=index
			}
		}
	}
</script>
<style>
	.div-bottom{
		background: #f1f1f1;
		height: 49px;
		width: 100%;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top:1px solid #f3f3f3 ;
	}
	.div-bottom .bottom_tubiao{
		text-align: center;
	}
	.bottom_tubiao img{
		width: 20px;
		height: 20px;
	}
	.bottom_tubiao p{
		font-size: 10px;
		color: #333;
	}
	.bottom_tubiao .color_active{
		color: #1fa4fc;
	}
</style>
